import { View} from '@tarojs/components';
import {Cell, List} from "@taroify/core";
import SectionButton from './SectionButton';
import FormSection from './formSection';


interface FormProps {
  spl_form: Array<any>;
  onChange: (newForm: Array<any>) => void;
}

export default function Index(props: FormProps) {
  // 解构 props
  const { spl_form, onChange } = props;

  // 删除某一部分表单
  const handleSectionRemove = (index: number) => {
    // 创建新的表单数据副本
    const updatedForm = [...spl_form];
    updatedForm.splice(index, 1); // 移除指定索引的表单部分
    onChange(updatedForm); // 更新父组件中的表单数据
  };

  return (
    <View
      className='agent-form-container'
    >
      <List>
        {spl_form?.map((section, index) => (
          <Cell key={index}>
            <FormSection
              key={index} // 为每个 FormSection 添加唯一的 key
              sectionData={section}
              index={index}
              onChange={onChange}
              onRemove={() => handleSectionRemove(index)} // 移除该部分
            />
          </Cell>
        ))}
        <Cell key={-1}>
          {/* 添加新表单部分的按钮 */}
          <SectionButton />
        </Cell>
      </List>
    </View>
  );
}
